<template>
  <div class="container">
    <MainNav
        :all-categories="allCategories"
        @filter-change="handleFilterChange"
        @login-success="handleLoginSuccess"
        @logout="handleLogout"
    />

    <main class="main-content">
      <header class="header">
        <h1 class="site-title">用户设置</h1>
        <p class="page-description">管理您的账户安全、通知偏好、隐私设置和订阅计划</p>
      </header>

      <div v-if="!isLoggedIn" class="not-logged-in">
        <div class="login-prompt-card">
          <div class="login-icon-container">
            <Icon name="material-symbols:settings" class="login-icon" />
          </div>
          <h2 class="login-title">请先登录</h2>
          <p class="login-message">登录后即可管理您的账户设置和偏好</p>
          <button class="login-button" @click="openLoginModal">
            立即登录
          </button>
        </div>
      </div>

      <div v-else class="settings-container">
        <div class="settings-tabs">
          <button
              v-for="tab in settingsTabs"
              :key="tab.id"
              :class="{ 'active': activeTab === tab.id }"
              class="tab-button"
              @click="activeTab = tab.id"
          >
            <Icon :name="tab.icon" class="tab-icon" />
            <span class="tab-label">{{ tab.label }}</span>
          </button>
        </div>

        <div v-if="activeTab === 'security'" class="settings-card">
          <h2 class="card-title">
            <Icon name="material-symbols:security" class="card-icon" />
            账户安全
          </h2>

          <div class="security-settings">
            <div class="setting-item">
              <div class="setting-info">
                <h3 class="setting-title">两步验证</h3>
                <p class="setting-description">
                  {{ twoFactorEnabled ? '已启用' : '未启用' }} - 提供额外的账户安全保障
                </p>
              </div>
              <label class="toggle-switch">
                <input
                    type="checkbox"
                    v-model="twoFactorEnabled"
                    @change="saveTwoFactorSetting"
                >
                <span class="slider round"></span>
              </label>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <h3 class="setting-title">修改密码</h3>
                <p class="setting-description">
                  更新您的账户密码以增强安全性
                </p>
              </div>
              <button
                  class="change-password-btn"
                  @click="openEmailVerificationModal('password')"
              >
                <Icon name="material-symbols:edit" class="action-icon" />
                修改
              </button>
            </div>

            <div class="privacy-actions">
              <button class="data-delete-btn" @click="startAccountDeletion">
                <Icon name="material-symbols:delete" class="action-icon" />
                注销账户
              </button>
            </div>
          </div>
        </div>

        <div v-if="activeTab === 'notifications'" class="settings-card">
          <h2 class="card-title">
            <Icon name="material-symbols:notifications" class="card-icon" />
            通知偏好
          </h2>

          <div class="notification-settings">
            <div class="setting-group">
              <h3 class="group-title">推送通知</h3>

              <div class="setting-item">
                <div class="setting-info">
                  <h4 class="setting-title">重要市场动态</h4>
                  <p class="setting-description">接收影响市场的重要新闻和数据推送</p>
                </div>
                <label class="toggle-switch">
                  <input
                      type="checkbox"
                      v-model="notificationSettings.marketAlerts"
                  >
                  <span class="slider round"></span>
                </label>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4 class="setting-title">订阅内容更新</h4>
                  <p class="setting-description">当您订阅的内容有更新时收到通知</p>
                </div>
                <label class="toggle-switch">
                  <input
                      type="checkbox"
                      v-model="notificationSettings.subscriptionUpdates"
                  >
                  <span class="slider round"></span>
                </label>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4 class="setting-title">账户活动</h4>
                  <p class="setting-description">接收账户登录、设置变更等安全通知</p>
                </div>
                <label class="toggle-switch">
                  <input
                      type="checkbox"
                      v-model="notificationSettings.accountActivity"
                  >
                  <span class="slider round"></span>
                </label>
              </div>
            </div>

            <div class="setting-group">
              <h3 class="group-title">邮件通知</h3>

              <div class="setting-item">
                <div class="setting-info">
                  <h4 class="setting-title">每日市场摘要</h4>
                  <p class="setting-description">每日收到精选市场动态和分析</p>
                </div>
                <label class="toggle-switch">
                  <input
                      type="checkbox"
                      v-model="notificationSettings.dailyDigest"
                  >
                  <span class="slider round"></span>
                </label>
              </div>

              <div class="setting-item">
                <div class="setting-info">
                  <h4 class="setting-title">订阅账单提醒</h4>
                  <p class="setting-description">收到订阅续费和账单通知</p>
                </div>
                <label class="toggle-switch">
                  <input
                      type="checkbox"
                      v-model="notificationSettings.billingReminders"
                  >
                  <span class="slider round"></span>
                </label>
              </div>
            </div>

            <button class="save-settings-btn" @click="saveNotificationSettings">
              保存通知设置
            </button>
          </div>
        </div>

        <div v-if="activeTab === 'privacy'" class="settings-card">
          <h2 class="card-title">
            <Icon name="material-symbols:privacy-tip" class="card-icon" />
            隐私设置
          </h2>

          <div class="privacy-settings">
            <div class="setting-item">
              <div class="setting-info">
                <h3 class="setting-title">数据收集</h3>
                <p class="setting-description">允许收集您的使用数据以改进服务</p>
              </div>
              <label class="toggle-switch">
                <input
                    type="checkbox"
                    v-model="privacySettings.dataCollection"
                >
                <span class="slider round"></span>
              </label>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <h3 class="setting-title">个性化推荐</h3>
                <p class="setting-description">基于您的浏览历史提供个性化内容</p>
              </div>
              <label class="toggle-switch">
                <input
                    type="checkbox"
                    v-model="privacySettings.personalizedRecommendations"
                >
                <span class="slider round"></span>
              </label>
            </div>

            <div class="setting-item">
              <div class="setting-info">
                <h3 class="setting-title">第三方共享</h3>
                <p class="setting-description">是否允许与合作伙伴共享您的匿名数据</p>
              </div>
              <label class="toggle-switch">
                <input
                    type="checkbox"
                    v-model="privacySettings.thirdPartySharing"
                >
                <span class="slider round"></span>
              </label>
            </div>
          </div>
        </div>

        <div v-if="activeTab === 'subscription'" class="settings-card subscription-management">
          <h2 class="card-title">
            <Icon name="material-symbols:subscriptions" class="card-icon" />
            订阅管理
          </h2>

          <div class="current-subscription">
            <h3 class="section-title">当前订阅</h3>
            <div class="subscription-card">
              <div class="subscription-header">
                <div class="plan-badge" :class="currentPlan">
                  {{ currentPlan === 'free' ? '免费' : currentPlan === 'standard' ? '标准' : '高级' }}
                </div>
                <h4 class="plan-title">
                  {{ currentPlan === 'free' ? '免费计划' : currentPlan === 'standard' ? '标准计划' : '高级计划' }}
                </h4>
                <div class="plan-price">
                  <span class="price">
                    {{ currentPlan === 'free' ? '¥0' : currentPlan === 'standard' ? '¥29' : '¥99' }}
                  </span>
                  <span class="period">
                    {{ currentPlan === 'free' ? '/永久' : '/月' }}
                  </span>
                </div>
              </div>

              <div class="billing-info">
                <p>
                  <span class="info-label">计费周期：</span>
                  <span class="info-value">
                    {{ currentPlan === 'free' ? '永久免费' : '按月计费' }}
                  </span>
                </p>
                <p>
                  <span class="info-label">下次计费日期：</span>
                  <span class="info-value">{{ nextBillingDate }}</span>
                </p>
              </div>
            </div>
          </div>

          <div class="available-plans">
            <h3 class="section-title">更换订阅计划</h3>
            <p class="smalltitle">详情计划，请查看订阅</p>
            <div class="plan-cards">
              <div class="plan-card" :class="{ 'current': currentPlan === 'free' }">
                <div class="plan-header">
                  <h4 class="plan-title">免费计划</h4>
                  <div class="plan-price">
                    <span class="price">¥0</span>
                    <span class="period">/永久</span>
                  </div>
                </div>

                <div class="plan-action">
                  <button
                      class="select-btn"
                      :disabled="currentPlan === 'free'"
                      @click="selectPlan('free')"
                  >
                    {{ currentPlan === 'free' ? '当前方案' : '选择方案' }}
                  </button>
                </div>
              </div>

              <div class="plan-card" :class="{ 'current': currentPlan === 'standard' }">
                <div class="plan-header">
                  <h4 class="plan-title">标准计划</h4>
                  <div class="plan-price">
                    <span class="price">¥29</span>
                    <span class="period">/月</span>
                  </div>
                </div>

                <div class="plan-action">
                  <button
                      class="select-btn"
                      :disabled="currentPlan === 'standard'"
                      @click="selectPlan('standard')"
                  >
                    {{ currentPlan === 'standard' ? '当前方案' : '选择方案' }}
                  </button>
                </div>
              </div>

              <div class="plan-card" :class="{ 'current': currentPlan === 'premium' }">
                <div class="plan-header">
                  <h4 class="plan-title">高级计划</h4>
                  <div class="plan-price">
                    <span class="price">¥99</span>
                    <span class="period">/月</span>
                  </div>
                </div>

                <div class="plan-action">
                  <button
                      class="select-btn"
                      :disabled="currentPlan === 'premium'"
                      @click="selectPlan('premium')"
                  >
                    {{ currentPlan === 'premium' ? '当前方案' : '选择方案' }}
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>

    <footer class="footer">
      <MainFooter />
    </footer>

    <LoginModal
        :visible="loginModalVisible"
        @close="closeLoginModal"
        @success="handleLoginSuccess"
    />

    <div
        class="modal-overlay"
        :class="{ 'active': emailVerificationModalVisible }"
        @click="closeEmailVerificationModal"
    >
      <div class="modal-container" @click.stop>
        <button class="close-btn" @click="closeEmailVerificationModal" aria-label="关闭">
          <Icon name="material-symbols:close" class="h-5 w-5" />
        </button>

        <div class="modal-header">
          <div class="tech-decoration"></div>
          <h2 class="modal-title">
            {{ emailVerificationPurpose === 'password' ? '邮箱验证' : '账户注销验证' }}
          </h2>
          <p class="modal-subtitle">
            {{ emailVerificationPurpose === 'password'
              ? '我们已向您的邮箱发送验证码，请输入以继续修改密码'
              : '我们已向您的邮箱发送验证码，请输入以继续注销账户' }}
          </p>
        </div>

        <form class="auth-form" @submit.prevent="verifyEmailCode">
          <div class="form-group">
            <label for="user-email" class="form-label">
              验证邮箱
            </label>
            <div class="input-wrapper">
              <Icon name="material-symbols:alternate-email" class="input-icon h-5 w-5" />
              <input
                  id="user-email"
                  type="email"
                  v-model="userEmail"
                  class="form-input"
                  :class="{ error: emailError }"
                  readonly
              >
            </div>
            <p class="error-message" v-if="emailError">{{ emailError }}</p>
          </div>

          <div class="form-group">
            <label for="verification-code" class="form-label">
              验证码
            </label>
            <div class="input-wrapper">
              <Icon name="material-symbols:verified" class="input-icon h-5 w-5" />
              <input
                  id="verification-code"
                  type="text"
                  v-model="verificationCode"
                  placeholder="请输入6位验证码"
                  class="form-input"
                  :class="{ error: codeError }"
                  maxlength="6"
              >
              <button
                  type="button"
                  class="send-code-btn"
                  @click="sendVerificationCode"
                  :disabled="isSendingCode || codeSent"
              >
                {{ codeSent ? `${countdown}s后重发` : '发送验证码' }}
              </button>
            </div>
            <p class="error-message" v-if="codeError">{{ codeError }}</p>
          </div>

          <button
              type="submit"
              class="submit-btn"
              :disabled="isVerifying || !verificationCode"
          >
            <span v-if="!isVerifying">
              <Icon name="material-symbols:check" class="h-4 w-4 mr-2" />
              验证并继续
            </span>
            <span v-if="isVerifying" class="loading">
              <span class="dot"></span>
              <span class="dot"></span>
              <span class="dot"></span>
            </span>
          </button>
        </form>
      </div>
    </div>

    <div
        class="modal-overlay"
        :class="{ 'active': changePasswordModalVisible }"
        @click="closeChangePasswordModal"
    >
      <div class="modal-container" @click.stop>
        <button class="close-btn" @click="closeChangePasswordModal" aria-label="关闭">
          <Icon name="material-symbols:close" class="h-5 w-5" />
        </button>

        <div class="modal-header">
          <div class="tech-decoration"></div>
          <h2 class="modal-title">修改密码</h2>
          <p class="modal-subtitle">请输入当前密码和新密码以完成修改</p>
        </div>

        <form class="auth-form" @submit.prevent="handlePasswordChange">
          <div class="form-group">
            <label for="current-password" class="form-label">
              当前密码
            </label>
            <div class="input-wrapper">
              <Icon name="material-symbols:lock" class="input-icon h-5 w-5" />
              <input
                  id="current-password"
                  :type="showCurrentPassword ? 'text' : 'password'"
                  v-model="currentPassword"
                  placeholder="请输入当前密码"
                  class="form-input"
                  :class="{ error: currentPasswordError }"
                  autocomplete="current-password"
              >
              <button
                  type="button"
                  class="toggle-password"
                  @click="showCurrentPassword = !showCurrentPassword"
                  :title="showCurrentPassword ? '隐藏密码' : '显示密码'"
                  aria-label="切换密码可见性"
              >
                <Icon :name="showCurrentPassword ? 'material-symbols:visibility' : 'material-symbols:visibility-off'" class="h-5 w-5" />
              </button>
            </div>
            <p class="error-message" v-if="currentPasswordError">{{ currentPasswordError }}</p>
          </div>

          <div class="form-group">
            <label for="new-password" class="form-label">
              新密码
            </label>
            <div class="input-wrapper">
              <Icon name="material-symbols:lock" class="input-icon h-5 w-5" />
              <input
                  id="new-password"
                  :type="showNewPassword ? 'text' : 'password'"
                  v-model="newPassword"
                  placeholder="请输入新密码"
                  class="form-input"
                  :class="{ error: newPasswordError }"
                  autocomplete="new-password"
              >
              <button
                  type="button"
                  class="toggle-password"
                  @click="showNewPassword = !showNewPassword"
                  :title="showNewPassword ? '隐藏密码' : '显示密码'"
                  aria-label="切换密码可见性"
              >
                <Icon :name="showNewPassword ? 'material-symbols:visibility' : 'material-symbols:visibility-off'" class="h-5 w-5" />
              </button>
            </div>
            <p class="error-message" v-if="newPasswordError">{{ newPasswordError }}</p>
            <p class="password-hint" v-if="!newPasswordError && newPassword.length > 0">
              密码至少8个字符，包含字母和数字
            </p>
          </div>

          <div class="form-group">
            <label for="confirm-password" class="form-label">
              确认新密码
            </label>
            <div class="input-wrapper">
              <Icon name="material-symbols:lock" class="input-icon h-5 w-5" />
              <input
                  id="confirm-password"
                  :type="showConfirmPassword ? 'text' : 'password'"
                  v-model="confirmPassword"
                  placeholder="请再次输入新密码"
                  class="form-input"
                  :class="{ error: confirmPasswordError }"
                  autocomplete="new-password"
              >
              <button
                  type="button"
                  class="toggle-password"
                  @click="showConfirmPassword = !showConfirmPassword"
                  :title="showConfirmPassword ? '隐藏密码' : '显示密码'"
                  aria-label="切换密码可见性"
              >
                <Icon :name="showConfirmPassword ? 'material-symbols:visibility' : 'material-symbols:visibility-off'" class="h-5 w-5" />
              </button>
            </div>
            <p class="error-message" v-if="confirmPasswordError">{{ confirmPasswordError }}</p>
          </div>

          <button
              type="submit"
              class="submit-btn"
              :disabled="isPasswordChanging"
          >
            <span v-if="!isPasswordChanging">
              <Icon name="material-symbols:save" class="h-4 w-4 mr-2" />
              保存修改
            </span>
            <span v-if="isPasswordChanging" class="loading">
              <span class="dot"></span>
              <span class="dot"></span>
              <span class="dot"></span>
            </span>
          </button>
        </form>
      </div>
    </div>

    <div
        class="modal-overlay"
        :class="{ 'active': deleteAccountModalVisible }"
        @click="closeDeleteAccountModal"
    >
      <div class="modal-container" @click.stop>
        <button class="close-btn" @click="closeDeleteAccountModal" aria-label="关闭">
          <Icon name="material-symbols:close" class="h-5 w-5" />
        </button>

        <div class="modal-header">
          <div class="tech-decoration"></div>
          <h2 class="modal-title">确认注销账户</h2>
          <p class="modal-subtitle">此操作不可恢复，请谨慎操作</p>
        </div>

        <form class="auth-form" @submit.prevent="deleteAccount">
          <div class="warning-icon-container">
            <Icon name="material-symbols:warning" class="warning-icon" />
          </div>

          <p class="confirm-message">
            注销账户后，您的所有数据将被永久删除，包括订阅信息、浏览历史和个人设置，此操作不可恢复。
          </p>

          <div class="form-group">
            <label for="delete-confirm" class="form-label">
              请输入"确认注销"以继续
            </label>
            <div class="input-wrapper">
              <Icon name="material-symbols:delete" class="input-icon h-5 w-5" />
              <input
                  id="delete-confirm"
                  type="text"
                  v-model="deleteConfirmText"
                  class="form-input"
                  :class="{ error: deleteConfirmError }"
                  placeholder="输入确认信息"
              >
            </div>
            <p class="error-message" v-if="deleteConfirmError">{{ deleteConfirmError }}</p>
          </div>

          <div class="form-actions">
            <button
                type="button"
                class="cancel-btn"
                @click="closeDeleteAccountModal"
            >
              取消
            </button>
            <button
                type="submit"
                class="submit-btn delete-account-btn"
                :disabled="deleteConfirmText !== '确认注销' || isDeletingAccount"
            >
              <span v-if="!isDeletingAccount">
                <Icon name="material-symbols:delete" class="h-4 w-4 mr-2" />
                确认注销
              </span>
              <span v-if="isDeletingAccount" class="loading">
                <span class="dot"></span>
                <span class="dot"></span>
                <span class="dot"></span>
              </span>
            </button>
          </div>
        </form>
      </div>
    </div>

    <div
        class="success-modal-overlay"
        :class="{ 'active': showSuccessModal }"
        @click="showSuccessModal = false"
    >
      <div class="success-modal" @click.stop>
        <div class="success-icon-container">
          <Icon name="material-symbols:check-circle" class="success-icon" />
        </div>
        <h3 class="success-title">订阅已更新!</h3>
        <p class="success-message">
          您已成功切换到 <strong>{{ selectedPlanName }}</strong> 计划，感谢您的支持！
        </p>
        <button
            class="success-btn"
            @click="showSuccessModal = false"
        >
          确认
        </button>
      </div>
    </div>

    <div
        class="toast-notification"
        :class="{ 'visible': showToast }"
    >
      <Icon name="material-symbols:check-circle" class="toast-icon" />
      <span class="toast-message">{{ toastMessage }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import newsData from '../../../public/data/news.json';
import MainNav from '@/components/MainNav/MainNav.vue';
import MainFooter from '@/components/Footer/MainFooter.vue';
import LoginModal from '@/components/LoginModal/LoginModal.vue';

interface NewsItem {
  category: string;
  [key: string]: any; // 其他属性
}

// 定义类型
interface User {
  id: string;
  name: string;
  email: string;
  avatar: string;
}

interface SettingTab {
  id: string;
  label: string;
  icon: string;
}

interface NotificationSettings {
  marketAlerts: boolean;
  subscriptionUpdates: boolean;
  accountActivity: boolean;
  dailyDigest: boolean;
  billingReminders: boolean;
}

interface PrivacySettings {
  dataCollection: boolean;
  personalizedRecommendations: boolean;
  thirdPartySharing: boolean;
}

// 登录状态管理
const loginModalVisible = ref<boolean>(false);
const isLoggedIn = ref<boolean>(false);
const userInfo = ref<User>({
  id: '',
  name: '',
  email: '',
  avatar: ''
});

const settingsTabs: SettingTab[] = [
  { id: 'security', label: '账户安全', icon: 'material-symbols:security' },
  { id: 'notifications', label: '通知偏好', icon: 'material-symbols:notifications' },
  { id: 'privacy', label: '隐私设置', icon: 'material-symbols:privacy-tip' },
  { id: 'subscription', label: '订阅管理', icon: 'material-symbols:subscriptions' }
];
const activeTab = ref<string>('security');

// 安全设置相关
const twoFactorEnabled = ref<boolean>(false);

// 邮箱验证
const emailVerificationModalVisible = ref<boolean>(false);
const emailVerificationPurpose = ref<'password' | 'delete'>('password');
const userEmail = ref<string>('');
const verificationCode = ref<string>('');
const isSendingCode = ref<boolean>(false);
const isVerifying = ref<boolean>(false);
const codeSent = ref<boolean>(false);
const countdown = ref<number>(60);
const emailError = ref<string>('');
const codeError = ref<string>('');
let countdownTimer: NodeJS.Timeout | null = null;

// 修改密码
const changePasswordModalVisible = ref<boolean>(false);
const currentPassword = ref<string>('');
const newPassword = ref<string>('');
const confirmPassword = ref<string>('');
const showCurrentPassword = ref<boolean>(false);
const showNewPassword = ref<boolean>(false);
const showConfirmPassword = ref<boolean>(false);
const isPasswordChanging = ref<boolean>(false);
const currentPasswordError = ref<string>('');
const newPasswordError = ref<string>('');
const confirmPasswordError = ref<string>('');

// 注销账户
const deleteAccountModalVisible = ref<boolean>(false);
const deleteConfirmText = ref<string>('');
const deleteConfirmError = ref<string>('');
const isDeletingAccount = ref<boolean>(false);

// 通知设置
const notificationSettings = ref<NotificationSettings>({
  marketAlerts: true,
  subscriptionUpdates: true,
  accountActivity: true,
  dailyDigest: false,
  billingReminders: true
});

// 隐私设置
const privacySettings = ref<PrivacySettings>({
  dataCollection: true,
  personalizedRecommendations: true,
  thirdPartySharing: false
});

// 订阅管理
const currentPlan = ref<string>('free');
const showSuccessModal = ref<boolean>(false);
const selectedPlan = ref<string>('');
const nextBillingDate = ref<string>('');

// 提示信息
const showToast = ref<boolean>(false);
const toastMessage = ref<string>('');

// 获取所有新闻分类
const allCategories = computed<string[]>(() => [
  ...new Set((newsData as NewsItem[]).map(item => item.category))
]);

// 订阅计划名称
const selectedPlanName = computed<string>(() => {
  const planNames = {
    'free': '免费',
    'standard': '标准',
    'premium': '高级'
  };
  return planNames[selectedPlan.value as keyof typeof planNames] || '';
});

// 配置页面元数据
useHead({
  title: '用户设置 - 金融简讯',
  meta: [
    {
      name: 'description',
      content: '管理您的金融简讯账户安全、通知偏好、隐私设置和订阅计划，个性化您的使用体验。'
    },
    {
      name: 'keywords',
      content: '账户设置, 通知偏好, 隐私设置, 订阅管理, 金融简讯设置'
    }
  ]
});

// 页面加载时初始化
onMounted(() => {
  // 检查本地存储中的登录状态
  const savedUser = localStorage.getItem('userInfo');
  if (savedUser) {
    try {
      userInfo.value = JSON.parse(savedUser);
      isLoggedIn.value = true;
      userEmail.value = userInfo.value.email; // 设置用户邮箱

      // 加载用户设置
      loadUserSettings();
    } catch (e) {
      console.error('解析用户信息失败', e);
    }
  }

  // 计算下次计费日期
  calculateNextBillingDate();
});

// 计算下次计费日期（30天后）
const calculateNextBillingDate = () => {
  const today = new Date();
  today.setDate(today.getDate() + 30);
  nextBillingDate.value = today.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
};

// 加载用户设置
const loadUserSettings = () => {
  if (!userInfo.value.id) return;

  // 加载安全设置
  const securitySettings = localStorage.getItem(`user_${userInfo.value.id}_security`);
  if (securitySettings) {
    try {
      const settings = JSON.parse(securitySettings);
      twoFactorEnabled.value = settings.twoFactorEnabled || false;
    } catch (e) {
      console.error('解析安全设置失败', e);
    }
  }

  // 加载通知设置
  const notificationSettingsStr = localStorage.getItem(`user_${userInfo.value.id}_notifications`);
  if (notificationSettingsStr) {
    try {
      const settings = JSON.parse(notificationSettingsStr);
      notificationSettings.value = { ...notificationSettings.value, ...settings };
    } catch (e) {
      console.error('解析通知设置失败', e);
    }
  }

  // 加载隐私设置
  const privacySettingsStr = localStorage.getItem(`user_${userInfo.value.id}_privacy`);
  if (privacySettingsStr) {
    try {
      const settings = JSON.parse(privacySettingsStr);
      privacySettings.value = { ...privacySettings.value, ...settings };
    } catch (e) {
      console.error('解析隐私设置失败', e);
    }
  }

  // 加载订阅计划
  const savedPlan = localStorage.getItem(`user_${userInfo.value.id}_subscription`);
  if (savedPlan) {
    currentPlan.value = savedPlan;
  }
};

const saveTwoFactorSetting = () => {
  if (!userInfo.value.id) return;

  const securitySettings = {
    twoFactorEnabled: twoFactorEnabled.value
  };

  localStorage.setItem(
      `user_${userInfo.value.id}_security`,
      JSON.stringify(securitySettings)
  );

  showToastMessage(twoFactorEnabled.value ? '两步验证已启用' : '两步验证已关闭');
};

// 保存通知设置
const saveNotificationSettings = () => {
  if (!userInfo.value.id) return;

  localStorage.setItem(
      `user_${userInfo.value.id}_notifications`,
      JSON.stringify(notificationSettings.value)
  );

  showToastMessage('通知设置已保存');
};

// 账户注销 -邮箱验证
const startAccountDeletion = () => {
  // 打开邮箱验证模态框，并指定用途为注销账户
  openEmailVerificationModal('delete');
};

// 打开注销账户模态框
const openDeleteAccountModal = () => {
  // 重置表单
  deleteConfirmText.value = '';
  deleteConfirmError.value = '';
  isDeletingAccount.value = false;

  deleteAccountModalVisible.value = true;
};

const closeDeleteAccountModal = () => {
  deleteAccountModalVisible.value = false;
};

const validateDeleteAccountForm = (): boolean => {
  let isValid = true;

  deleteConfirmError.value = '';

  if (deleteConfirmText.value !== '确认注销') {
    deleteConfirmError.value = '请输入"确认注销"以继续';
    isValid = false;
  }

  return isValid;
};

const deleteAccount = async () => {
  if (!validateDeleteAccountForm()) {
    return;
  }

  isDeletingAccount.value = true;

  try {
    // 模拟API请求延迟
    await new Promise(resolve => setTimeout(resolve, 1500));

    // 执行注销操作
    handleLogout();
    closeDeleteAccountModal();

    showToastMessage('账户已成功注销');

    // 延迟导航到首页，让用户看到提示信息
    setTimeout(() => {
      navigateTo('/');
    }, 1500);
  } catch (error) {
    console.error('注销账户失败', error);
    deleteConfirmError.value = '注销账户失败，请重试';
  } finally {
    isDeletingAccount.value = false;
  }
};

// 显示提示信息
const showToastMessage = (message: string) => {
  toastMessage.value = message;
  showToast.value = true;

  setTimeout(() => {
    showToast.value = false;
  }, 3000);
};

// 选择订阅计划
const selectPlan = (plan: string) => {
  if (!isLoggedIn.value) {
    openLoginModal();
    return;
  }

  // 如果选择的是当前已选计划，不做处理
  if (currentPlan.value === plan) {
    return;
  }

  selectedPlan.value = plan;
  // 更新当前选中的计划
  currentPlan.value = plan;

  // 保存当前计划到本地存储
  if (userInfo.value.id) {
    localStorage.setItem(`user_${userInfo.value.id}_subscription`, plan);
  }

  // 重新计算下次计费日期
  calculateNextBillingDate();

  // 显示成功提示
  showSuccessModal.value = true;

  // 调用后端API的逻辑
  console.log(`用户 ${userInfo.value.name} 已切换到 ${plan} 订阅计划`);
};

// 登录相关方法
const openLoginModal = () => {
  loginModalVisible.value = true;
};

const closeLoginModal = () => {
  loginModalVisible.value = false;
};

const handleLoginSuccess = (user: User) => {
  isLoggedIn.value = true;
  userInfo.value = user;
  userEmail.value = user.email; // 设置用户邮箱
  loginModalVisible.value = false;

  // 保存用户信息到本地存储
  localStorage.setItem('userInfo', JSON.stringify(user));

  // 加载用户设置
  loadUserSettings();
};

const handleLogout = () => {
  isLoggedIn.value = false;
  userInfo.value = {
    id: '',
    name: '',
    email: '',
    avatar: ''
  };
  userEmail.value = ''; // 清空用户邮箱
  localStorage.removeItem('userInfo');

  // 重置设置
  twoFactorEnabled.value = false;
  notificationSettings.value = {
    marketAlerts: true,
    subscriptionUpdates: true,
    accountActivity: true,
    dailyDigest: false,
    billingReminders: true
  };

  // 重置订阅计划为免费
  currentPlan.value = 'free';
};

// 处理筛选变化
const handleFilterChange = (filters: { category: string; date: string }) => {
  console.log('筛选条件变化:', filters);
};

// 邮箱验证相关方法 - 修改为支持不同用途
const openEmailVerificationModal = (purpose: 'password' | 'delete') => {
  // 重置表单
  verificationCode.value = '';
  emailError.value = '';
  codeError.value = '';
  codeSent.value = false;
  emailVerificationPurpose.value = purpose;
  emailVerificationModalVisible.value = true;
};

const closeEmailVerificationModal = () => {
  emailVerificationModalVisible.value = false;
  // 清除倒计时
  if (countdownTimer) {
    clearInterval(countdownTimer);
    countdownTimer = null;
  }
};

const sendVerificationCode = () => {
  // 验证邮箱格式
  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!userEmail.value || !emailRegex.test(userEmail.value)) {
    emailError.value = '请输入有效的邮箱地址';
    return;
  }

  isSendingCode.value = true;
  emailError.value = '';

  // 模拟发送验证码API请求
  setTimeout(() => {
    try {
      // 这里应该是实际发送验证码的API调用
      console.log(`向 ${userEmail.value} 发送${emailVerificationPurpose.value === 'password' ? '修改密码' : '注销账户'}验证码`);

      // 生成一个随机的6位验证码用于演示
      const randomCode = Math.floor(100000 + Math.random() * 900000).toString();
      console.log(`验证码: ${randomCode} (实际应用中不会显示)`);

      // 保存验证码到本地存储用于验证（实际应用中应在服务器验证）
      localStorage.setItem(`verification_code_${userInfo.value.id}_${emailVerificationPurpose.value}`, randomCode);

      codeSent.value = true;
      showToastMessage('验证码已发送到您的邮箱');

      // 开始倒计时
      startCountdown();
    } catch (error) {
      console.error('发送验证码失败', error);
      emailError.value = '发送验证码失败，请重试';
    } finally {
      isSendingCode.value = false;
    }
  }, 1500);
};

const startCountdown = () => {
  countdown.value = 60;

  if (countdownTimer) {
    clearInterval(countdownTimer);
  }

  countdownTimer = setInterval(() => {
    countdown.value--;

    if (countdown.value <= 0) {
      clearInterval(countdownTimer as NodeJS.Timeout);
      countdownTimer = null;
      codeSent.value = false;
    }
  }, 1000);
};

const verifyEmailCode = () => {
  // 验证验证码
  if (!verificationCode.value || verificationCode.value.length !== 6) {
    codeError.value = '请输入6位验证码';
    return;
  }

  isVerifying.value = true;
  codeError.value = '';

  // 模拟验证验证码API请求
  setTimeout(() => {
    try {
      // 从本地存储获取验证码进行验证（实际应用中应在服务器验证）
      const storedCode = localStorage.getItem(`verification_code_${userInfo.value.id}_${emailVerificationPurpose.value}`);

      if (verificationCode.value === storedCode) {
        // 验证成功，根据用途执行不同操作
        closeEmailVerificationModal();

        if (emailVerificationPurpose.value === 'password') {
          // 打开修改密码模态框
          openChangePasswordModal();
        } else {
          // 打开注销确认模态框
          openDeleteAccountModal();
        }

        showToastMessage('邮箱验证成功');
      } else {
        codeError.value = '验证码不正确，请重新输入';
      }
    } catch (error) {
      console.error('验证验证码失败', error);
      codeError.value = '验证失败，请重试';
    } finally {
      isVerifying.value = false;
    }
  }, 1500);
};

// 修改密码相关方法
const openChangePasswordModal = () => {
  // 重置表单
  currentPassword.value = '';
  newPassword.value = '';
  confirmPassword.value = '';
  currentPasswordError.value = '';
  newPasswordError.value = '';
  confirmPasswordError.value = '';

  changePasswordModalVisible.value = true;
};

const closeChangePasswordModal = () => {
  changePasswordModalVisible.value = false;
};

// 验证密码修改表单
const validatePasswordForm = (): boolean => {
  let isValid = true;

  // 重置错误信息
  currentPasswordError.value = '';
  newPasswordError.value = '';
  confirmPasswordError.value = '';

  // 验证当前密码
  if (!currentPassword.value) {
    currentPasswordError.value = '请输入当前密码';
    isValid = false;
  } else {
    // 这里应该与服务器存储的密码进行比对
    // 模拟验证：假设密码是"password123"
    const storedPassword = localStorage.getItem(`user_${userInfo.value.id}_password`) || 'password123';
    if (currentPassword.value !== storedPassword) {
      currentPasswordError.value = '当前密码不正确';
      isValid = false;
    }
  }

  // 验证新密码
  if (!newPassword.value) {
    newPasswordError.value = '请输入新密码';
    isValid = false;
  } else if (newPassword.value.length < 8) {
    newPasswordError.value = '密码至少8个字符';
    isValid = false;
  } else if (!/(?=.*[A-Za-z])(?=.*\d)/.test(newPassword.value)) {
    newPasswordError.value = '密码必须包含字母和数字';
    isValid = false;
  } else if (newPassword.value === currentPassword.value) {
    newPasswordError.value = '新密码不能与当前密码相同';
    isValid = false;
  }

  // 验证确认密码
  if (!confirmPassword.value) {
    confirmPasswordError.value = '请确认新密码';
    isValid = false;
  } else if (confirmPassword.value !== newPassword.value) {
    confirmPasswordError.value = '两次输入的密码不一致';
    isValid = false;
  }

  return isValid;
};

// 处理密码修改
const handlePasswordChange = async () => {
  if (!validatePasswordForm()) {
    return;
  }

  isPasswordChanging.value = true;

  try {
    // 模拟API请求延迟
    await new Promise(resolve => setTimeout(resolve, 1500));

    // 保存新密码到本地存储
    if (userInfo.value.id) {
      localStorage.setItem(`user_${userInfo.value.id}_password`, newPassword.value);
    }

    closeChangePasswordModal();
    showToastMessage('密码已成功更新');

  } catch (error) {
    console.error('修改密码失败', error);
    currentPasswordError.value = '修改密码失败，请重试';
  } finally {
    isPasswordChanging.value = false;
  }
};

onUnmounted(() => {
  if (countdownTimer) {
    clearInterval(countdownTimer);
  }
});
</script>

<style scoped>
* {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 15px;
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  min-height: 100vh;
  transition: background-color 0.3s ease;
}

.header {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
  animation: fadeIn 0.8s ease-out;
}


@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.site-title {
  font-size: 2.2rem;
  margin: 0 0 15px 0;
  color: #222;
  position: relative;
  display: inline-block;
  font-weight: 700;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

.site-title::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 10%;
  width: 80%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #3498db, transparent);
  border-radius: 3px;
}

.page-description {
  font-size: 1.1rem;
  color: #666;
  max-width: 700px;
  margin: 0 auto;
  line-height: 1.7;
}

.not-logged-in {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 50vh;
  padding: 20px;
}

.login-prompt-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
  padding: 40px 30px;
  text-align: center;
  max-width: 400px;
  width: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.login-prompt-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.login-icon-container {
  width: 80px;
  height: 80px;
  background-color: #f1f5f9;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
}

.login-icon {
  font-size: 2.5rem;
  color: #3498db;
}

.login-title {
  font-size: 1.5rem;
  margin: 0 0 15px 0;
  color: #2c3e50;
  font-weight: 600;
}

.login-message {
  color: #666;
  margin: 0 0 25px 0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.login-button {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 30px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(41, 128, 185, 0.2);
  width: 100%;
}

.login-button:hover {
  background: linear-gradient(135deg, #2980b9 0%, #1f6dad 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(41, 128, 185, 0.3);
}

.settings-container {
  animation: fadeIn 0.5s ease-out;
}

.settings-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 25px;
  overflow-x: auto;
  padding-bottom: 10px;
  scrollbar-width: thin;
}

.settings-tabs::-webkit-scrollbar {
  height: 4px;
}

.settings-tabs::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

.tab-button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: white;
  border: 1px solid #eee;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.tab-button:hover {
  border-color: #ddd;
  color: #3498db;
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(0,0,0,0.05);
}

.tab-button.active {
  background-color: #3498db;
  color: white;
  border-color: #3498db;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.2);
}

.tab-icon {
  font-size: 1.2rem;
}

.tab-label {
  font-weight: 500;
}

.settings-card {
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 3px 15px rgba(0,0,0,0.05);
  padding: 25px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-bottom: 30px;
}

.settings-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 20px rgba(0,0,0,0.08);
}

.card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.3rem;
  margin: 0 0 25px 0;
  color: #2c3e50;
  font-weight: 600;
  padding-bottom: 15px;
  border-bottom: 1px solid #f0f0f0;
}

.card-icon {
  color: #3498db;
  font-size: 1.5rem;
}

.setting-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f5f5f5;
  transition: background-color 0.2s ease;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-item:hover {
  background-color: #fafafa;
}

.setting-info {
  flex: 1;
  padding-right: 20px;
}

.setting-title {
  margin: 0 0 5px 0;
  font-size: 1.05rem;
  color: #2c3e50;
  font-weight: 600;
}

.setting-description {
  margin: 0;
  font-size: 0.9rem;
  color: #777;
  line-height: 1.6;
}

.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 26px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #3498db;
}

input:checked + .slider:before {
  transform: translateX(24px);
}


.group-title {
  font-size: 1.1rem;
  margin: 0 0 15px 0;
  padding: 10px 0;
  color: #444;
  font-weight: 600;
  border-bottom: 1px solid #eee;
}

.setting-group {
  margin-bottom: 25px;
}

.setting-group:last-child {
  margin-bottom: 0;
}

.save-settings-btn {
  background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 30px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 5px rgba(41, 128, 185, 0.2);
  margin-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.save-settings-btn:hover {
  background: linear-gradient(135deg, #2980b9 0%, #1f6dad 100%);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(41, 128, 185, 0.3);
}

.privacy-actions {
  display: flex;
  gap: 15px;
  margin-top: 25px;
  flex-wrap: wrap;
}

.data-delete-btn {
  background-color: #fef7f7;
  color: #e74c3c;
  border: 1px solid #fdeaea;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.data-delete-btn:hover {
  background-color: #fdeaea;
  color: #c0392b;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.change-password-btn {
  background-color: #f0f7ff;
  color: #3498db;
  border: 1px solid #dbeafe;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.change-password-btn:hover {
  background-color: #e0efff;
  color: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(52, 152, 219, 0.1);
}

.action-icon {
  font-size: 1rem;
}


.form-input {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 1rem;
  transition: all 0.3s ease;
  color: #333;
  background-color: #fafafa;
}

.form-input:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
  background-color: white;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 30px;
}

.cancel-btn {
  width: 100px;
  background-color: #f5f5f5;
  color: #666;
  border: 1px solid #ddd;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.cancel-btn:hover {
  background-color: #eee;
  color: #333;
}



.warning-icon-container {
  width: 60px;
  height: 60px;
  background-color: #fef7f7;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
}

.warning-icon {
  font-size: 2rem;
  color: #e74c3c;
}

.confirm-message {
  color: #666;
  margin: 0 0 25px 0;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: left;
  padding: 0 10px;
}


.toast-notification {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background-color: rgba(46, 204, 113, 0.9);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  z-index: 1000;
  transition: transform 0.3s ease, opacity 0.3s ease;
  opacity: 0;
  font-weight: 500;
}

.toast-notification.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}

.toast-icon {
  font-size: 1.2rem;
}

.footer {
  text-align: center;
  margin-top: 40px;
  padding: 25px 15px 15px;
  border-top: 1px solid #eee;
}

.dark-theme .container {
  background-color: #1a1a1a;
  color: #f0f0f0;
}

.dark-theme .settings-card,
.dark-theme .login-prompt-card {
  background-color: #2d2d2d;
}

.dark-theme .page-description,
.dark-theme .setting-description,
.dark-theme .login-message,
.dark-theme .confirm-message {
  color: #bbb;
}

.dark-theme .tab-button {
  background-color: #2d2d2d;
  border-color: #444;
  color: #bbb;
}

.dark-theme .form-input {
  background-color: #3a3a3a;
  border-color: #555;
  color: #f0f0f0;
}

.dark-theme .setting-item:hover {
  background-color: #3a3a3a;
}

.subscription-management {
  padding-bottom: 30px;
}

.section-title {
  font-size: 1.1rem;
  margin: 0 0 20px;
  color: #2c3e50;
  font-weight: 600;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.smalltitle {
  font-size: 0.9rem;
  color: #bbb;
  font-weight: 400;
  font-style: italic;
}

.current-subscription {
  margin-bottom: 40px;
}

.subscription-card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
}

.subscription-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.subscription-header {
  text-align: center;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #e0e0e0;
}

.billing-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-label {
  font-weight: 600;
  color: #555;
  min-width: 120px;
  display: inline-block;
}

.info-value {
  color: #333;
}

.available-plans {
  margin-bottom: 40px;
}

.plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.plan-card {
  background-color: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #f0f0f0;
  transition: all 0.3s ease;
  position: relative;
  text-align: center;
}

.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 15px rgba(0,0,0,0.08);
}

.plan-card.current {
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.plan-header {
  padding: 20px;
  text-align: center;
  border-bottom: 1px solid #f5f5f5;
}

.plan-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 10px;
  background-color: #3498db;
  color: white;
}

.plan-title {
  font-size: 1.2rem;
  margin: 0 0 10px;
  color: #222;
  font-weight: 600;
}

.plan-price {
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 5px;
}

.plan-price .price {
  font-size: 1.8rem;
  font-weight: 700;
  color: #222;
}

.plan-price .period {
  color: #777;
  font-size: 0.9rem;
}

.plan-action {
  padding: 20px;
}

.select-btn {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #3498db;
  color: #3498db;
  background-color: transparent;
}

.select-btn:hover:not(:disabled) {
  background-color: rgba(52, 152, 219, 0.05);
}

.select-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background-color: #f5f5f5;
}

.success-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.success-modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.success-modal {
  background-color: white;
  border-radius: 8px;
  padding: 40px 30px;
  text-align: center;
  max-width: 400px;
  width: 90%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(20px) scale(0.95);
  transition: all 0.3s ease;
}

.success-modal-overlay.active .success-modal {
  transform: translateY(0) scale(1);
}

.success-icon-container {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: rgba(46, 204, 113, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 25px;
}

.success-icon {
  color: #2ecc71;
  font-size: 3rem;
}

.success-title {
  font-size: 1.5rem;
  margin: 0 0 15px;
  color: #222;
  font-weight: 700;
}

.success-message {
  color: #666;
  margin: 0 0 30px;
  font-size: 1rem;
  line-height: 1.6;
}

.success-message strong {
  color: #222;
}

.success-btn {
  background-color: #3498db;
  color: white;
  border: 1px solid #3498db;
  padding: 10px 30px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.success-btn:hover {
  background-color: #2980b9;
  border-color: #2980b9;
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 模态框通用样式 */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(22, 93, 255, 0.15) 0%, rgba(0, 15, 30, 0.85) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  backdrop-filter: blur(8px);
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-container {
  width: 100%;
  max-width: 420px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(22, 93, 255, 0.2);
  overflow: hidden;
  transform: translateY(20px) scale(0.98);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.modal-overlay.active .modal-container {
  transform: translateY(0) scale(1);
}

/* 装饰元素 */

.tech-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #165DFF, #36CFC9);
}

/* 关闭按钮 */

.close-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(22, 93, 255, 0.1);
  cursor: pointer;
  color: #64748b;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}


.close-btn:hover {
  background-color: #fff;
  color: #165DFF;
  transform: rotate(90deg);
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.15);
}

/* 标题区域 */

.modal-header {
  padding: 35px 30px 20px;
  text-align: center;
  position: relative;
}

.modal-title {
  margin: 0 0 10px 0;
  font-size: 1.6rem;
  color: #0A1629;
  font-weight: 600;
  letter-spacing: -0.5px;
}

.modal-subtitle {
  margin: 0;
  font-size: 0.95rem;
  color: #64748b;
  font-weight: 400;
}

/* 表单样式 */

.auth-form {
  padding: 0 30px 25px;
}

.form-group {
  margin-bottom: 22px;
}

.form-label {
  display: block;
  margin-bottom: 10px;
  font-size: 0.95rem;
  color: #334155;
  font-weight: 500;
}

.input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.auth-form .form-input {
  width: 100%;
  padding: 14px 15px 14px 45px;
  border: 1px solid rgba(22, 93, 255, 0.15);
  border-radius: 10px;
  font-size: 1rem;
  transition: all 0.25s ease;
  background-color: rgba(255, 255, 255, 0.7);
  color: #0A1629;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.03);
}

.auth-form .form-input:focus {
  outline: none;
  border-color: #165DFF;
  box-shadow: 0 0 0 4px rgba(22, 93, 255, 0.1);
  background-color: #fff;
}

.auth-form .form-input.error {
  border-color: #F53F3F;
}

.auth-form .form-input.error:focus {
  box-shadow: 0 0 0 4px rgba(245, 63, 63, 0.1);
}

.input-icon {
  position: absolute;
  left: 14px;
  color: #86909C;
  transition: color 0.25s ease;
}

.auth-form .form-input:focus + .toggle-password Icon,
.auth-form .form-input:focus ~ .input-icon {
  color: #165DFF;
}

/* 发送验证码按钮 */

.send-code-btn {
  position: absolute;
  right: 10px;
  background: none;
  border: 1px solid rgba(22, 93, 255, 0.2);
  color: #165DFF;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.25s ease;
}

.send-code-btn:hover:not(:disabled) {
  background-color: rgba(22, 93, 255, 0.05);
  border-color: #165DFF;
}

.send-code-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  color: #86909C;
  border-color: rgba(134, 144, 156, 0.2);
}

/* 密码切换按钮 */

.toggle-password {
  position: absolute;
  right: 10px;
  background: none;
  border: none;
  cursor: pointer;
  color: #86909C;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.toggle-password:hover {
  background-color: rgba(22, 93, 255, 0.05);
  color: #165DFF;
}

/* 错误信息 */

.error-message {
  margin: 6px 0 0 0;
  font-size: 0.85rem;
  color: #F53F3F;
  min-height: 1.2em;
  display: flex;
  align-items: center;
}

.error-message::before {
  content: "!";
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #F53F3F;
  color: white;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  margin-right: 6px;
  font-weight: bold;
}

/* 密码提示 */

.password-hint {
  margin: 6px 0 0 0;
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.4;
}

/* 提交按钮 */

.submit-btn {
  width: 100%;
  padding: 14px;
  background: linear-gradient(90deg, #165DFF, #0FC6C2);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(22, 93, 255, 0.2);
}

/* 注销账户按钮特殊样式 */

.delete-account-btn {
  background: linear-gradient(90deg, #F53F3F, #E02020);
  box-shadow: 0 4px 15px rgba(245, 63, 63, 0.2);
}

.delete-account-btn:hover:not(:disabled) {
  box-shadow: 0 6px 20px rgba(245, 63, 63, 0.3);
}

.delete-account-btn::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.submit-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: all 0.6s ease;
}

.submit-btn:hover:not(:disabled)::before {
  left: 100%;
}

.submit-btn:hover:not(:disabled) {
  transform: translateY(-3px);
}

.submit-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(22, 93, 255, 0.2);
}

.submit-btn:disabled {
  background: linear-gradient(90deg, #C9CDD4, #86909C);
  cursor: not-allowed;
  box-shadow: none;
}

/* 加载动画 */

.loading {
  display: flex;
  gap: 8px;
}

.dot {
  width: 9px;
  height: 9px;
  background-color: white;
  border-radius: 50%;
  animation: bounce 1.4s infinite ease-in-out both;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}

.dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}

/* 响应式样式 */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }

  .site-title {
    font-size: 1.8rem;
    letter-spacing: -0.3px;
  }

  .page-description {
    font-size: 1rem;
    padding: 0 15px;
  }

  .settings-card {
    padding: 20px 15px;
  }

  .setting-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .setting-info {
    padding-right: 0;
  }

  .toggle-switch {
    align-self: flex-end;
    margin-top: -30px;
  }

  .privacy-actions {
    flex-direction: column;
  }

  .data-delete-btn, .change-password-btn {
    width: 100%;
    justify-content: center;
  }

  .form-actions {
    flex-direction: column;
  }

  .cancel-btn {
    width: 100%;
  }

  .billing-info {
    flex-direction: column;
    gap: 8px;
  }

  .info-label {
    display: block;
    margin-bottom: 3px;
  }
}

@media (max-width: 480px) {
  .tab-button {
    padding: 8px 12px;
    font-size: 0.9rem;
  }

  .tab-label {
    display: none;
  }

  .tab-icon {
    font-size: 1.3rem;
  }

  .setting-title {
    font-size: 1rem;
  }

  .group-title {
    font-size: 1rem;
  }

  .save-settings-btn {
    width: 100%;
    justify-content: center;
  }

  .plan-cards {
    grid-template-columns: 1fr;
  }

  .modal-container {
    margin: 0 15px;
    border-radius: 12px;
  }

  .modal-header,
  .auth-form {
    padding-left: 20px;
    padding-right: 20px;
  }

  .modal-title {
    font-size: 1.4rem;
  }
}
</style>
